<template>
  <div class="user">
    <van-nav-bar
            title="个人中心"
            left-text="我的文稿"
            right-text="我的素材"

            @click-left="alert('OK')"
            @click-right="$router.push('/resMgr')"
    />
    <div class="head_box">

    <van-icon id="head_img"
              name="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=991732452,3647715660&fm=26&gp=0.jpg"
              size="3.00rem"/>
    <van-row type="flex" justify="center">
      <van-col span="8" id="nick_name">{{userInfo.nickName}}</van-col>
    </van-row>
    </div>
    <van-cell-group title="个人信息" v-if="null!=userInfo">
      <van-cell title="ID" :label="userInfo.userCode" :center=true />
      <van-cell title="个性签名" :label="userInfo.signature" :center=true />
      <van-cell title="昵称" :value="userInfo.nickName" :center=true />
      <van-cell title="性别" :value="userInfo.sex==1?'男':'女'" :center=true />
      <van-cell title="邮箱" :value="userInfo.email" :center=true />
      <van-cell title="城市" :value="userInfo.address" :center=true />
    </van-cell-group>

    <van-cell-group title="更多操作">
      <van-cell title="修改信息" is-link to="/updateUserInfo" />
      <van-cell title="修改密码" is-link to="/updatePassword" />
    </van-cell-group>
<!--    <van-cell-group title="我的参与">-->
<!--      <van-cell title="我的收藏" is-link />-->
<!--      <van-cell title="我的关注" is-link />-->
<!--      <van-cell title="我的作品" is-link />-->
<!--      <van-cell title="我的评论" is-link/>-->
<!--    </van-cell-group>-->
<br>
    <br>
    <br>
    <br>
  </div>
</template>

<script>
  import ltxService from '../services/LtxService'
export default {
  name: 'User',
  mounted(){

      ltxService.getUserInfo().then(resp=>{
        this.userInfo=resp.data.data
      })

  },
  data(){
    return{
      userInfo:{}
    }
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.user{
  .head_box{
    height: 200px;
  }

  #nick_name{
    font-size: 20px;
    text-align: center;
  }
  width: 360px;
  margin: 0 auto;
  #head_img{
    &>img{
      display: block;
      border-radius: 150px;
    }
    margin: 20px auto;
    display: block;


  }
}
</style>
